<template>
  <div class="info" v-loading="loading">
    <div class="title">
      <router-link to="/">首页</router-link>
      <span style="margin:0 5px">></span>
      {{data.shop_title}}
    </div>
    <div class="shop_box">
      <div class="shop_box_left">
        <img
          class="cover"
          @click="showCover"
          ref="cover"
          :src="imgsrc||'http://www.baseco.top/ljm/public/uploads/shop/'+data.shop_img"
          alt
          srcset
        >
        <div class="shop_box_swiper">
          <img
            @click="changeImage()"
            :src="'http://www.baseco.top/ljm/public/uploads/shop/'+data.shop_img"
            alt
            srcset
          >
          <img
            @click="changeImage(item)"
            v-for="(item,index) in defaultImg"
            :key="index"
            :src="item.url"
            alt
            srcset
          >
        </div>
      </div>
      <div class="shop_box_right">
        <span class="shop_title">
          <label class="font_red">{{data.shop_title}}</label>
          {{data.shop_desc}}
        </span>
        <ul class="price_box">
          <li>
            <span class="price_label">本站价</span>
            <span>
              <strong class="yuan">¥</strong>
              {{price||subdata[0].shop_price}}.00
              <a
                class="down_price"
                href="javascript:void(0);"
              >降价通知</a>
            </span>
          </li>
          <li>
            <span class="price_label">领卷</span>
            <span class="juan">100元</span>
          </li>
        </ul>
        <div class="shop_sub">
          <span
            @click="changePrice(item,index)"
            :class="[changeVal==index?'active':'']"
            v-for="(item,index) in subdata"
            :key="index"
          >{{item.shop_spc_name}}</span>
        </div>
        <div class="shop_sub">库存: {{stock||subdata[0].shop_stock}}</div>
        <div class="shop_sub">重量: {{weight||subdata[0].shop_weight}}</div>
        <div class="btn-box">
          <span class="btn add" @click="addCar">加入购物车</span>
          <span class="btn" @click="zixun = !zixun">在线咨询</span>
          <img v-show="zixun" class="zixunScan" src="@/assets/scan.png" alt>
        </div>
      </div>
    </div>
    <div class="shop_bottom">
      <ul>
        <li
          v-for="(item,index) in shop_bottom"
          :key="index"
          @click="setIndex(item)"
          :class="setShopIndex == item?'active':''"
        >{{item}}</li>
      </ul>
      <div class="info" v-if="setShopIndex == '商品详情'">
        <img :src="'http://www.baseco.top/ljm/public/uploads/shop/'+data.shop_img" alt>
      </div>
      <div class="comment" v-if="setShopIndex == '商品评论'">
        <div v-if="commentData.data.length !=0">
          <div class="list" v-for="(item,index) in commentData.data" :key="index">
            <div class="left">
              <img src="@/assets/level5.gif" alt>
              <span class="name">{{item.name||"游客"}}</span>
            </div>
            <div class="right">
              <rateDefault :value="item.value" size="20px"></rateDefault>
              <span class="sendtime">{{item.comment_time}}发布“评价”</span>
              <span class="content">{{item.content||''}}</span>
              <span class="goods">
                商品名称：
                <a href="/category-shafa/goods-278378.html" target="_blank">{{data.shop_title}}</a>
              </span>
            </div>
          </div>
          <div class="pageList">
            <page
              :page-index="comment.page"
              :total="comment.total"
              :page-size="comment.pageSize"
              @change="commentPage"
            ></page>
          </div>
        </div>
        <div v-else style="text-align: center;
    min-height: 100px;
    line-height: 100px;">暂无评论</div>

        <div class="add-comment">
          <Rate v-model="comment.value" size="20px">
            <span>添加评论</span>
          </Rate>
          <el-input
            style="margin-top:10px;"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="comment.content"
          ></el-input>
          <div style="text-align:right">
            <el-button size="small" style="margin-top:10px;" @click="addComment">发表</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="查看图片" :visible.sync="dialogTableVisible">
      <img :src="dialogImg" alt>
    </el-dialog>
  </div>
</template>

<script>
import { ljmAjax, POST } from "@/api/index";
import Page from "@/components/page";
import Rate from "@/components/rate";
import rateDefault from "@/components/rateDefault";
import moment from "moment";
export default {
  data() {
    return {
      loading: false,
      dialogTableVisible: false,
      dialogImg: "",
      loginData: this.$store.state.loginData || "",
      page: 1,
      count: 10,
      pageSize: 5,
      shop_bottom: ["商品详情", "商品评论"],
      setShopIndex: "商品详情",
      zixun: false,
      id: this.$route.query.id,
      data: {},
      price: 0,
      stock: 0,
      weight: 0,
      changeVal: 0,
      subdata: [
        {
          shop_price: 0
        }
      ],
      commentData: [],
      comment: {
        page: 1,
        pageSize: 10,
        total: 0,
        value: 0,
        content: ""
      },
      defaultImg: [],
      imgsrc: ""
    };
  },
  components: {
    Page,
    Rate,
    rateDefault
  },
  created() {
    this.loading = true;
    const data = {
      id: this.id
    };
    ljmAjax("api/index/getShopInfo", data)
      .then(res => {
        this.getInfoBanner();

        console.log(res.data.data);
        this.data = res.data.data;
        document.title = this.data.shop_title + this.data.shop_desc;
        this.subdata = res.data.data.sublist;
        this.price = this.subdata[0].shop_price;
        this.getComment();
      })
      .then(() => {
        this.loading = false;
      });
  },
  methods: {
    getInfoBanner() {
      ljmAjax("api/index/getInfoBanner")
        .then(res => {
          console.log(res.data.data);
          this.defaultImg = res.data.data;
        })
        .then(() => {});
    },
    showCover() {
      this.dialogTableVisible = true;
      this.dialogImg = this.$refs.cover.src;
    },
    changeImage(item) {
      this.imgsrc = item ? item.url : "";
    },
    pageChange(page) {
      this.page = page;
      console.log(page);
    },
    commentPage(page) {
      this.comment.page = page;
      this.getComment();
    },
    setIndex(item) {
      this.setShopIndex = item;
    },
    addCar() {
      const shop_buyer = this.loginData.id || 0;
      if(shop_buyer ==0 ){
        this.$message.error('请先登录在点击购买');
        this.$router.push('/login')
        return;
      }
      const data = {
        shop_id: this.id,
        shop_title: this.data.shop_title,
        shop_price: this.price,
        shop_time: new Date().getTime(),
        shop_img: this.data.shop_img,
        shop_buyer: shop_buyer
      };
      POST("api/index/addCar", data).then(res => {
        console.log(res.data.msg);
         this.$message({
          message: res.data.msg,
          type: 'success'
        });
      });
    },
    changePrice(item, index) {
      this.stock = item.shop_stock;
      this.weight = item.shop_weight;
      this.changeVal = index;
      this.price = item.shop_price;
    },
    getComment() {
      const data = {
        shop_id: this.id,
        page: this.comment.page,
        pageSize: this.comment.pageSize
      };
      POST("api/index/getComment", data).then(res => {
        this.commentData = res.data;
        this.comment.total = res.data.total;
        console.log("getComment", res.data);
      });
    },
    addComment() {
      const data = {
        shop_id: this.id,
        name_id: this.loginData.id,
        content: this.comment.content,
        name: this.loginData.uname,
        value: this.comment.value,
        comment_time: moment().format("YYYY-MM-DD HH:mm:ss")
      };
      console.log(data);
      if (data.content.length == 0) {
        this.$message({
          message: "评论内容不能为空哦!",
          type: "warning"
        });
        return;
      }
      if (this.$store.state.isLogin == false) {
        this.$message({
          message: "请登录了再评论哦!",
          type: "warning"
        });
        return;
      }
      POST("api/index/addComment", data).then(res => {
        this.commentData = res.data;
        this.comment.total = res.data.total;
        this.comment = {
          page: 1,
          pageSize: 10,
          total: 0,
          value: 0,
          content: ""
        };
        this.$message({
          message: "评论成功",
          type: "success"
        });
        console.log("addComment", res.data);
        this.getComment();
      });
    }
  }
};
</script>
<style scoped>
.pageList {
  text-align: right;
}
.btn-box {
  margin-top: 10px;
  position: relative;
}
.zixunScan {
  position: absolute;
  width: 200px;
  top: -200px;
  left: 250px;
}
.btn {
  width: 175px;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  text-align: center;
  display: inline-block;
  color: #fff;
  background-color: #e62318;
  border: solid 1px #e62318;
  cursor: pointer;
  user-select: none;
}
.btn.add:hover {
  background: #fff;
}
.btn.add {
  color: #e62318;
  border: solid 1px #e62318;
  background-color: #ffeded;
}
.info {
  width: 1200px;
  margin: 0 auto;
  min-height: 450px;
  height: 100%;
}
.info .title {
  color: #aaa;
  font-size: 14px;
  line-height: 50px;
  font-size: 15px;
}
.info .cover {
  width: 470px;
  height: 345px;
  /* float: left; */
  /* margin-right: 35px; */
}
.info .shop_box_right {
  width: 500px;
  float: left;
}
.add-comment {
  width: 600px;
  margin: 0 auto;
  padding: 30px 20px;
  border: 1px solid #ccc;
}
.comment {
  margin: 0 auto;
  height: 100%;
  min-height: 200px;
}
.comment .list {
  overflow: hidden;
  border-bottom: 1px solid #e6e6e6;
}
.comment .list .left {
  float: left;
  width: 100px;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  align-items: center;
}
.comment .list .left .name {
  font-size: 12px;
}
.comment .list .right {
  float: left;
  display: flex;
  flex-direction: column;
  width: calc(100% - 140px);
  text-align: justify;
  padding: 20px;
}
.comment .list .right .content {
  width: 85%;
  color: #333;
  line-height: 150%;
  font-size: 12px;
  text-align: justify;
}
.comment .list .right .goods {
  font-size: 12px;
  color: #999;
  margin-top: 11px;
}
.comment .list .right .goods a {
  color: #999;
}
.comment .list .right .goods a:hover {
  color: red;
}
.comment .list .right .sendtime {
  text-align: right;
  color: #999;
  font-size: 12px;
  margin-bottom: 10px;
}
.comment .list .left img {
  width: 50px;
  height: 50px;
}
.font_red {
  color: red;
  margin-right: 10px;
}
.shop_box {
  overflow: hidden;
  display: flex;
}
.shop_bottom {
  margin-top: 40px;
}
.shop_bottom ul {
  border: solid 1px #eee;
  background: #fafafa;
}
.shop_bottom ul li {
  padding: 10px;
  font-size: 15px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
}
.shop_bottom ul li.active {
  border-bottom: 1px solid red;
}
.shop_bottom img {
  width: 100%;
}
.shop_bottom .info {
  padding: 20px;
  width: calc(100% - 40px);
}
.shop_box_left {
  width: 470px;
  margin-right: 35px;
}
.shop_box_swiper {
  height: 75px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.shop_box_swiper img {
  width: 24%;
  height: 100%;
  cursor: pointer;
}
.shop_box_right .shop_title {
  display: block;
  font-size: 15px;
  text-align: justify;
}
.shop_box_right .shop_sub {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.shop_box_right .shop_sub span {
  padding: 5px 10px;
  border: 1px solid #ccc;
  margin-right: 10px;
  margin-bottom: 5px;
  font: 400 14px/20px "microsoft yahei";
  cursor: pointer;
}
.shop_box_right .shop_sub span.active {
  border: 1px solid #e62318;
}
.shop_box_right .shop_sub span:hover {
  border-color: #e62318;
}
.price_box {
  padding: 17px 10px 20px 15px;
  color: #999;
  background: #f7f7f7;
  margin-top: 15px;
}
.price_box .juan {
  display: inline-block;
  font-size: 15px;
  padding: 0 5px;
  height: 25px;
  line-height: 25px;
  border: 1px dashed #ccc;
  cursor: pointer;
}
.price_box li {
  width: 100%;
  height: 34px;
  line-height: 34px;
}
.down_price {
  font-size: 13px;
  display: inline-block;
  margin-left: 10px;
}
.price_label {
  width: 40px;
  font-size: 12px;
  float: left;
}
.price_box li:first-child {
  font-size: 28px;
  font-weight: 400;
  color: #e62318;
  padding-top: 2px;
}
.yuan {
  font-size: 20px;
  font-weight: 400;
  color: #e62318;
}
</style>
<style>
.el-dialog img {
  width: 100%;
}
</style>


